
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>RowGrid.js Demo by brunjo</title>

    <link rel="stylesheet" href="http://brunjo.github.io/rowGrid.js/stylesheets/styles.css">
    <link rel="stylesheet" href="http://brunjo.github.io/rowGrid.js/stylesheets/pygment_trac.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
    <script src="http://brunjo.github.io/rowGrid.js/javascripts/jquery.row-grid.js" ></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
      .container, .container2 {
        background: #f1c40f;
      }
      .container:before,
      .container:after,
      .container2:before,
      .container2:after {
          content: "";
          display: table;
      }
      .container:after,
      .container2:after {
          clear: both;
      }
      .item {
        float: left;
        margin-bottom: 10px; 
      }
      .item img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: bottom;
      }
      .first-item {
        clear: both;
      }
      .last-row, .last-row ~ .item {
        margin-bottom: 0;
      }
    </style>
    <script>
      var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
      $(document).ready(function() {
        /* Simple Example */
        $(".container").rowGrid(options);
        /* Endless Scroll Example */
        $(".container2")
          .rowGrid(options)
          .on("scroll", function() {
            if($(".container2").scrollTop() + $(".container2").height() > $(".container2")[0].scrollHeight -30) {
              $(".container2").append("<div class='item'><img src='http://lorempixel.com/140/100?" + Math.random() + "' width='140' height='100' /></div><div class='item'><img src='http://lorempixel.com/130/100?" + Math.random() + "' width='130' height='100' /></div><div class='item'><img src='http://lorempixel.com/80/100?" + Math.random() + "' width='80' height='100' /></div><div class='item'><img src='http://lorempixel.com/150/100?" + Math.random() + "' width='150' height='100' /></div><div class='item'><img src='http://lorempixel.com/120/100?" + Math.random() + "' width='120' height='100' /></div><div class='item'><img src='http://lorempixel.com/110/100?" + Math.random() + "' width='110' height='100' /></div><div class='item'><img src='http://lorempixel.com/140/100?" + Math.random() + "' width='140' height='100' /></div><div class='item'><img src='http://lorempixel.com/90/100?" + Math.random() + "' width='90' height='100' /></div><div class='item'><img src='http://lorempixel.com/130/100?" + Math.random() + "' width='130' height='100' /></div><div class='item'><img src='http://lorempixel.com/120/100?" + Math.random() + "' width='120' height='100' /></div><div class='item'><img src='http://lorempixel.com/100/100?" + Math.random() + "' width='100' height='100' /></div><div class='item'><img src='http://lorempixel.com/140/100?" + Math.random() + "' width='140' height='100' /></div><div class='item'><img src='http://lorempixel.com/80/100?" + Math.random() + "' width='80' height='100' /></div>");
              $(".container2").rowGrid("appended");
            }
          });
      });
    </script>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>RowGrid.js</h1>
        <p>A small, lightweight jQuery plugin for placing items in straight rows</p>

        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="A small, lightweight jQuery plugin for placing images in straight rows." data-url="http://brunjo.github.io/rowGrid.js/" data-hashtags="javascript" data-via="3runjo">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

        <p class="view"><a href="https://github.com/brunjo/rowGrid.js">View the Project on GitHub <small>brunjo/rowGrid.js</small></a></p>


        <ul>
          <li><a href="https://github.com/brunjo/rowGrid.js/zipball/master">Download <strong>ZIP File</strong></a></li>
          <li><a href="https://github.com/brunjo/rowGrid.js/tarball/master">Download <strong>TAR Ball</strong></a></li>
          <li><a href="https://github.com/brunjo/rowGrid.js">View On <strong>GitHub</strong></a></li>
        </ul>
      </header>
      <section>
        <h1>RowGrid.js Demos</h1>

<h2>Installation</h2>

<pre><code>&lt;script src="path/to/jquery.min.js" &gt;
&lt;script src="path/to/jquery.row-grid.min.js" &gt;
</code></pre>

<h2>Simple Example</h2>
<p>Responsive: Resize your browser.</p>

<div class="container">
  <div class="item">
    <img src="http://lorempixel.com/120/100?1" width="120" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100?2" width="100" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/130/100?3" width="130" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100?4" width="100" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/110/100?5" width="110" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/90/100?6" width="90" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100?7" width="100" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/90/100" width="90" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/150/100" width="150" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/120/100" width="120" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/130/100" width="130" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/140/100" width="140" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/120/100?13" width="120" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/140/100?14" width="140" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/80/100?15" width="80" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/120/100?16" width="120" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/110/100?17" width="110" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/130/100?18" width="130" height="100" />
  </div>
</div>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="item"&gt;
    &lt;img src="path/to/image" width="120" height="100" /&gt;
  &lt;/div&gt;
  &lt;div class="item"&gt;
    &lt;img src="path/to/image" width="130" height="100" /&gt;
  &lt;/div&gt;
  ...
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.container {
  background: #eee;
}
/* clearfix */
.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {
    clear: both;
}

.item {
  float: left;
  margin-bottom: 10px; 
}
.item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
.first-item {
  clear: both;
}
/* remove margin bottom on last row */
.last-row, .last-row ~ .item {
  margin-bottom: 0;
}
</code></pre>

<p>JS:</p>

<pre><code>$(document).ready(function() {
  var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
  $(".container").rowGrid(options);
});
</code></pre>

<h2>Endless Scrolling</h2>
<div class="container2">
  <div class="item">
    <img src="http://lorempixel.com/120/100?1" width="120" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100?2" width="100" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/130/100?3" width="130" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100?4" width="100" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/110/100?5" width="110" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/90/100?6" width="90" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100?7" width="100" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/90/100" width="90" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/150/100" width="150" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/120/100" width="120" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/130/100" width="130" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/140/100" width="140" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/120/100?13" width="120" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/140/100?14" width="140" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/110/100?15" width="110" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/80/100?16" width="80" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/140/100?17" width="140" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100?18" width="100" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/120/120?19" width="120" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/90/100?20" width="90" height="100" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/140/100?21" width="140" height="100" />
  </div>
</div>

<p>JS:</p>

<pre><code>$(document).ready(function() {
  var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
  <b>$(".container").rowGrid(options);</b>

  // endless scrolling
  $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() == $(document).height()) {
        $(".container").append("&lt;div class='item'&gt;&lt;img src='path/to/image' width='140' height='100' /&gt;&lt;/div&gt;");
        <b>$(".container").rowGrid("appended");</b>
     }
  });
});
</code></pre>
      </section>
      <footer>
        <p>This project is maintained by <a href="https://github.com/brunjo">brunjo</a></p>
        <p>Follow me on Twitter <a href="https://twitter.com/3runjo">@3runjo</a></p>
        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
      </footer>
    </div>
    <script src="http://brunjo.github.io/rowGrid.js/javascripts/scale.fix.js"></script>
    
  </body>
</html>
